<template>
	<div class="system-dicManager-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="800px">

			<el-card shadow="hover">

				<pre v-html="state.row"></pre>

			</el-card>

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">关闭</el-button>
				</span>
			</template>
		</el-dialog>

	</div>
</template>

<script setup lang="ts" name="flashSwapPairEditDialog">
import { ElMessage } from 'element-plus';
import { computed, reactive, ref, watch } from 'vue';

import JSONPretty from 'json-pretty-html';




const editDialogFormRef = ref();

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);




const state = reactive({
	row: null as any,
	leveList: [] as any,
	coinList: [] as any,
	ruleForm: {} as any,
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
});


// 打开弹窗
const openDialog = async (type: string, row?: any) => {

	if (type === 'edit') {

		row.type = row.type == 1 ? 'app' : '后台'
		state.row = JSONPretty(row);


		state.ruleForm = {};
		state.dialog.title = '详情';
		state.dialog.submitTxt = '确定';
	} else {
		state.ruleForm = {};
		state.dialog.title = '详情';
		state.dialog.submitTxt = '确定';
	}
	state.dialog.type = type;
	state.dialog.isShowDialog = true;


};




// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};

// 取消
const onCancel = () => {
	closeDialog();
};




watch(
	() => state.dialog.isShowDialog,
	(newValue) => {
		if (newValue == true) {
		}
	}, { immediate: true }
);




// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style lang="scss">
.el-select {
	width: 100% !important;
}



.system-dicManager-dialog-container {
	.bar_tools {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.el-table__expanded-cell {
		padding: 20px;
	}
}
</style>